<template>
	<view class="webview-container">
		<web-view :src="webUrl" @message="onMessage" @error="onError"></web-view>
		<!-- 加载状态 -->
		<view class="loading-overlay" v-if="loading">
			<view class="loading-spinner"></view>
			<text class="loading-text">加载中...</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				webUrl: '',
				loading: true
			};
		},
		onLoad(options) {
			// 获取传递过来的URL参数
			if (options.url) {
				this.webUrl = decodeURIComponent(options.url);
				console.log('加载WebView URL:', this.webUrl);
			}
			// 5秒后隐藏加载提示
			setTimeout(() => {
				this.loading = false;
			}, 5000);
		},
		methods: {
			// 接收webview发送的消息
			onMessage(e) {
				console.log('收到WebView消息:', e.detail.data);
				// 可以根据消息类型做不同处理
				const data = e.detail.data[0];
				if (data.type === 'payment_success') {
					// 支付成功
					this.handlePaymentSuccess();
				} else if (data.type === 'payment_cancel') {
					// 支付取消
					this.handlePaymentCancel();
				}
			},
			// 处理支付成功
			handlePaymentSuccess() {
				uni.showToast({
					title: '支付成功',
					icon: 'success'
				});
				// 延迟返回，让用户看到成功提示
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/me/me'
					});
				}, 1500);
			},
			// 处理支付取消
			handlePaymentCancel() {
				uni.showToast({
					title: '支付已取消',
					icon: 'none'
				});
				// 返回上一页
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			},
			// 处理加载错误
			onError(e) {
				console.error('WebView加载错误:', e);
				this.loading = false;
				uni.showToast({
					title: '页面加载失败',
					icon: 'none'
				});
			}
		}
	};
</script>

<style>
	.webview-container {
		width: 100%;
		height: 100vh;
		position: relative;
	}

	/* 加载提示样式 */
	.loading-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(255, 255, 255, 0.9);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		z-index: 9999;
	}

	.loading-spinner {
		width: 60rpx;
		height: 60rpx;
		border: 6rpx solid #f3f3f3;
		border-top: 6rpx solid #ff6b6b;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		margin-bottom: 20rpx;
	}

	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}

	.loading-text {
		font-size: 28rpx;
		color: #666;
	}
</style>